<template>
  <el-row :gutter="20">
    <el-col :span="16">
      <div class="topic-input" @click="toTopicAdd">
        <div class="placeholder">写点什么吧?</div>
        <div class="right-icon"><i class="el-icon-edit"></i></div>
      </div>
      <div class="topic-articles">
        <div class="topic-header">
          <i class="el-icon-third-svgwrite"></i>
          文章
        </div>
        <div class="content">
          <article-item v-for="item in blogList" :blog="item" :key="`blog`+item.id"></article-item>
        </div>
        <div class="bottom">
          <el-pagination

              layout="prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="hot-article">
        <h1>热门帖子</h1>
        <div class="articles">
          <div class="item" v-for="(item,index) in hotArticles" @click="toBlog(item.id)">
            <div class="hot-icon">
              <span>{{ index + 1 }}</span>
              <img :src="index | filterDefaultIcon" alt="">
            </div>
            <span v-text="item.title"></span>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import ArticleItem from "../../components/ArticleItem";
import {blogList, blogPopular} from "../../api/blog";

export default {
  name: "BlogShow",
  components: {ArticleItem},
  async created() {
    await this.getPopular()
    this.getBlogList()
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      blogList: [],
      articles: ['哪撸多', '撒嘶给', '路飞', '索隆', '西歪Q'],
      hotArticles: ['坚决打击啊撒旦吉萨家的', '基地啊家的撒娇的四艘绝对是', '大祭司哦打击说的没错', '五大囧新名词西欧财经网', '陈炯吴炯刺激我',
        '多试几次每次慢性两种', '的设计都是基地撒', '打死就打算几点睡的时间段', '几次哦小吃节嘻嘻欧美系羡慕羡慕羡慕', '五大囧大祭司哦杀敌哦撒'
      ]
    }
  },
  methods: {
    toTopicAdd() {
      this.$router.push(`/blog/add`);
    },
    getBlogList() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      blogList(data).then(res => {
        let data = res.data.data;
        this.currentPage = data.currentPage
        this.total = data.total
        this.blogList = data.list
      })
    },
    async getPopular() {
      await blogPopular().then(res => {
        this.hotArticles = res.data.data
      })
    },
    toBlog(id) {
      this.$router.push(`/blog/${id}`)
    }
  },
  filters: {
    filterDefaultIcon(index) {
      switch (index) {
        case 0:
          return require('../../assets/image/icon/icon_1.png')
        case 1:
          return require('../../assets/image/icon/icon_2.png')
        case 2:
          return require('../../assets/image/icon/icon_3.png')
        default:
          return require('../../assets/image/icon/icon_other.png')
      }
    }
  }
}
</script>

<style scoped>
.topic-input {
  background-color: #FFFFFF;
  padding: 25px 22px;
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-input .placeholder {
  font-size: 18px;
  color: #999999;
}

.topic-input .right-icon i {
  font-size: 25px;
  color: #ff8296;
}

.topic-articles {
  margin-top: 10px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.topic-header {
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ececec;
}

.topic-articles .topic-header {
  font-size: 14px;
  color: #333333;
}

.topic-articles .topic-header .el-icon-third-svgwrite {
  color: #d4d4d4;
  font-size: 20px !important;
  margin-right: 5px;
}

.topic-articles .content {
  padding: 10px 18px;
}

.topic-articles .bottom {
  padding: 5px 18px;
  text-align: right;
}

.hot-article {
  background-color: #FFFFFF;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.hot-article h1:first-of-type {
  margin: 0;
  font-size: 17px;
}

.hot-article .articles .item {
  font-size: 15px;
  color: #333333;
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.hot-article .articles .item:hover {
  color: #409EFF;
}

.hot-article .hot-icon {
  width: 18px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 5px;
}

.hot-article .hot-icon span {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  line-height: 20px;
}
</style>
